<script setup>
import {ref, watch} from 'vue';
import Tapbar from "../../components/tapbar.vue";
const list = ref([])
import {onLoad, onReady} from "@dcloudio/uni-app";
import { getCarListAPI,PutUpdateNumAPI, deleteShop } from '/src/api/shopCar/shopCarApi'
const price = ref(0)
const checkList = ref([])
const tableData = ref([])
const uToastRef = ref(null);

watch(tableData,(newVal)=>{
updataTotalPrice()
})

onLoad(()=>{
  uni.showToast({
    icon:'loading'
  })
  getCarList()
})
onReady(()=>{
  uni.hideToast();
})


async function updataTotalPrice(){
  const list = await getCarList(true)
  price.value = list.reduce((value,item)=>{
    return Number(Number(item.shop_price)*Number(item.goods_number))+value
  },0)
}


function onchange(e) {
  console.log(e);
  checkList.value = e.detail.value
}

async function getCarList(bool) {
  const {data, state, msg} = await getCarListAPI();
  console.log(data, '购物车数据');
  if (state === 200&&!bool) {
    tableData.value = data
  } else if(state === 200&&bool){
    return data
  }
}

//更新数量
async function onUpdateNum(e,id){
  const option ={goods_id:id,buyNum:e.value}
  const {state,msg,data} = await PutUpdateNumAPI(option)
  if(state === 200){
    updataTotalPrice()
  }else{
    uToastRef.value.show({
      type: 'error',
      message: msg,
    });
  }
}


async function onDelete(id){
  const{msg, state} = await deleteShop({cart_id:id})
  if(state === 200){
    uToastRef.value.show({
      type: 'success',
      message: msg,
    });
    await getCarList()
  }else{
    uToastRef.value.show({
      type: 'error',
      message: msg,
    });
  }
}
</script>


<template>
  <image v-if="checkList.length !== 0" class="del" src="/src/assets/shanchu.png"></image>
  <up-toast ref="uToastRef"></up-toast>
  <Tapbar :value1="2"></Tapbar>
  <view>
    <view class="header">
      <view>购物车</view>
    </view>
    <view class="content">

      <checkbox-group :value="list" @change="onchange">
      <view class="content-shop" v-for="(item,index) in tableData" :key="index">
          <label>
            <checkbox :value="item.cart_id" checked="true" />
          </label>
        <view>
          <image class="imageBig" :src="item.goods_img2"></image>
        </view>
        <view class="title">
          <image class="title-image" @click="onDelete(item.cart_id)" src="/src/assets/shanchu.png"></image>
          <view class="h1">{{ item.goods_name }}</view>
          <view class="p">数量：{{item.goods_number}}</view>
          <view style="display: flex;justify-content: space-between">
            <text style="color:red;">￥{{item.shop_price}}</text>
            <up-number-box :min="1" :modelValue="Number(item.goods_number)" @change="onUpdateNum($event,item.goods_id)" :max="100">
            </up-number-box>
          </view>
        </view>
      </view>
      </checkbox-group>
    </view>
    <view class="total">
     <view style="margin-top:38rpx;">
       <label for="">
         <checkbox checked="true" />全选
       </label>
     </view>
      <view class="bottom-right">
        <view class="bottom-right-title">
          合计：<text>￥{{price}}</text>
        </view>
        <button class="btn">支付</button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.del{
  position:fixed;
  width:50rpx;
  height:50rpx;
  top:30rpx;
  left:30rpx;
}
.header{
  width:750rpx;
  height:141rpx;
  text-align: center;
  line-height:141rpx;
}
.content{
  width:750rpx;
  padding-bottom: 250rpx;
  .content-shop{
    width:687rpx;
    height:198rpx;
    display:flex;
    margin:auto;
    .imageBig{
      width:161rpx;
      height:161rpx;
    }
    .title{
      width:445rpx;
      margin-left:20rpx;
      position: relative;
      .h1{
        font-size:31rpx;
        width: 80%; /* 设置一个固定宽度 */
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 超出隐藏 */
        text-overflow: ellipsis;
      }
      .p{
        font-size:19rpx;
        color: rgba(0, 0, 0, 0.44);
        margin-bottom:57rpx;
      }
      .title-image{
       position:absolute;
        width:40rpx;
        height:40rpx;
        top:30rpx;
        right:0;
      }
    }
  }
}
.total{
  height:98rpx;
  background:#fff;
  display: flex;
  justify-content: space-between;
  text-align: center;
  position: fixed;
  bottom:0;
  padding-bottom:100rpx;
  border-top:1px rgba(0, 0, 0, 0.22) solid;
  left:0;
  padding-top:10rpx;
  .btn{
    width:222rpx;
    height:97rpx;
    background:red;
    color:#fff;
  }
  .bottom-right{
    display:flex;
    margin-left:130rpx;
    .bottom-right-title{
      width:auto;
      margin-top:38rpx;
      margin-right:31rpx;

    }
  }
}
</style>
